<template>
  <div class="profile-main-tabs my-tabs">
    <div v-for="tab in tabs" :key="tab.key" class="my-tabs-item">
      <router-link
        :to="`/users/${userId}/${tab.key}`"
        class="my-tabs-link"
        :class="{ 'is-active': active === tab.key }"
      >{{ tab.label }}</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'profile-main-tabs',
  data() {
    return {
      tabs: [
        { key: 'activities', label: '动态' },
        { key: 'spaces', label: '空间' },
        { key: 'docs', label: '资源' },
        { key: 'issues', label: '提问' },
        { key: 'answers', label: '回答' },
        { key: 'collections', label: '收藏' },
        { key: 'following', label: '关注' },
      ],
    };
  },
  computed: {
    active() { return this.$route.params.curTab || 'activities'; },
    userId() { return this.$route.params.userId; },
  },
  created() {
    this.handleChanged(this.active);
  },
  methods: {
    handleChanged(val) { this.$emit('input', val); },
  },
  watch: {
    active(val) {
      this.handleChanged(val);
    },
  },
};
</script>

<style lang="scss">
.profile-main-tabs {
  display: flex;
  flex-wrap: nowrap;

  .my-tabs-item {
    flex-shrink: 0;
    padding: 0 12px;

    &.is-active {
      font-weight: 600;
    }
  }
}
</style>
